<template><!--注册组件-->
    <div class="reg-form">
        <div class="g-form">
            <div class="g-form-line">
                <span class="g-form-label">用户名：</span>
                    <div class="g-form-input">
                        <input type="text" placeholder="请输入注册用户名" v-model="regUserNameModel">
                    </div>
                <span class="g-form-error">{{ regUserErrors.regErrorText }}</span>
            </div>
            <div class="g-form-line">
                <span class="g-form-label">密码：</span>
                    <div class="g-form-input">
                        <input type="password" placeholder="请输入注册密码" v-model="regPasswordModel">
                    </div>
                    <span class="g-form-error">{{ regPasswordErrors.regErrorText }}
                </span>
            </div>
            <div class="g-form-line">
                <span class="g-form-label">手机号：</span>
                    <div class="g-form-input">
                        <input type="text" placeholder="请输入手机号" v-model="regPhoneModel" @keydown.enter="onRegster">
                    </div>
                    <span class="g-form-error">{{ regPhoneErrors.regErrorText }}
                </span>
            </div>
            <div class="g-form-line">
                    <div class="g-form-btn">
                        <a class="button" @click="onRegster">注册</a>
                    </div>
                </div>
                <p class="logTitle">{{ regErrorText }}</p>
            </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                regUserNameModel: '',
                regPasswordModel: '',
                regPhoneModel: '',
                regErrorText:''
            }
        },
        computed: {
            regUserErrors () {
                let regErrorText,regStatus
                if (!/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/g.test(this.regUserNameModel)) { //如果没有@符号
                    regStatus = false
                    regErrorText = "注册账户必须为邮箱格式"
                } else {
                    regStatus = true 
                    regErrorText = ''
                }
                if(!this.regUserFlag){
                    regErrorText = ''
                    this.regUserFlag = true
                }

                return {
                    regStatus,regErrorText
                }
            },
            regPasswordErrors () {
                let regErrorText,regStatus
                if(!/^\w{6,11}$/g.test(this.regPasswordModel)){
                    regStatus = false
                    regErrorText = '密码限制6~11位'
                } else {
                    regStatus = true
                    regErrorText = ''
                }
                if(!this.regPasswordFlag){
                    regErrorText =  ''
                    this.regPasswordFlag = true
                }
                return {
                    regStatus,regErrorText
                }
            },
            regPhoneErrors () {
                let regErrorText,regStatus
                if(!/0?(13|14|15|17|18)[0-9]{9}/g.test(this.regPhoneModel)){
                    regStatus = false
                    regErrorText = '手机号码格式不正确'
                } else {
                    regStatus = true
                    regErrorText = ''
                }
                if(!this.regPhoneFlag){
                    regErrorText = ''
                    this.regPhoneFlag = true
                }
                return {
                    regErrorText,regStatus
                }
            }
        },
        methods:{
            onRegster(){
                    if(!this.regUserErrors.regStatus|| !this.regPasswordErrors.regStatus||!this.regPhoneErrors.regStatus ){
                        this.regErrorText = '部分注册信息不通过'
                    } else {
                        this.regErrorText = ''
                        this.$emit('has-reg')
                    }
            }
        }
    }
</script>
<style>
    
</style>